<template>
    <div class="index_bottom">
      <div v-for="value in object" class="index_bottom_btn"
             v-bind:class="{index_bottom_active : value.sign_c}" @click="cc(value.sign)" >
          <img  v-bind:src="value.icon" class="icon" alt="">
          <p class="bottom_sty_fs">{{value.text}}</p>
      </div>
    </div>
</template>
<script>
  import '../../static/sprite/input_sprite.css'
  import {mapState, mapMutations} from 'vuex'
  import store from '../vuex/store_index'
  export default {
    name: 'bottom_btn',
    data () {
      return {
        object: this.$store.getters.Get_Bot_C_obj,
        sign_c: true
      }
    },
    computed: mapState([
      'BottomBtn'
    ]),
    methods: {
      ...mapMutations([
        'M_BottomClick',
        'M_BottomClick_2'
      ]),
      cc (sign) {
        this.$store.commit('M_BottomClick',sign)
      }
    },
    mounted(){
      this.$store.getters.Get_Bot_C_obj
    }
  }
</script>
<style>
  .icon{
    display: block;
    width: 1.4rem;
    margin: 1.1rem auto 0;
    /*background-position:100%;*/
    /*background-size: 1.55rem 0.75rem;*/
  }
  .bottom_sty_fs{
    height: 1rem;
    line-height: 1.6rem;
    font-size: 0.7rem;

  }
  .index_bottom .index_bottom_active{
    background-color: #dd3838;
  }
  .index_bottom{
    display: flex;
    justify-content:space-around;
    /*position: absolute;*/
    /*bottom: 0;*/
    /*left:0;*/
  }
  .index_bottom_btn{
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 33.3333vw;
    height: 4rem;
    text-align: center;
    line-height: 4rem;
    background-color: #fa3c3c;
    color: #fff;
  }
</style>
